<template>
  <p-modal
      :dialogClass="'tableChoose'"
      v-model="visible"
      :title="title"
      :width="800"
    >
      <div style="display:flex;">
        <div style="width:240px;">
          <p-input
            v-model="keyword"
            :placeholder="inputText"
          />
        </div>
        <p-button
          type="primary"
          style="margin-left:10px;"
          @click="search"
        >
          搜索
        </p-button>
      </div>
      <p-table
        ref="tableRef"
        :data-source="tableData"
        :columns="columns"
        :pagination="pagination"
        :scroll="{ x: x, y: 400 }"
        :row-key="idField"
        style="width: 100%;margin-top:16px;"
        @change="tableChange"
        :row-selection="{ fixed:true, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      />
      <div
        slot="footer"
        class="dialog-footer"
      >
        <div class="cText">
          <span>已选择({{ chooseList.length }})</span>
        </div>
        <div class="modal-footer-scroll">
          <p-tag
            v-for="item in chooseList"
            :key="item[idField]"
            closable
            size="mini"
            style="margin-right:10px;"
            @close="removeChoose(item[idField])"
          >
            {{ item[tagName] || item.skillCode || ''}}
          </p-tag>
        </div>
        <p-button
          type="primary"
          @click="confirmChoose"
        >
          确 定
        </p-button>
      </div>
      </p-dialog>
    </p-modal>
</template>

<script>
import { cloneObject } from '@u/util'
import { userList } from '@/api/manage'
import _ from "lodash";
export default {
  name: 'ChooseCon',
  props: {
    x: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    tagName: {
      type: String,
      default: () => {
        return 'name';
      }
    },
    inputText: String,
    idField: {
      type: String,
      default: () => {
        return 'id';
      }
    },
    title: String,
    columns: Array,
    apiMethods: {
      type: String,
      default: () => {
        return '';
      }
    },
  },
  data () {
    return {
      searchDept: '',
      orgOptions: [],
      emptyText: '请选择',
      chooseList: [],
      selectedRowKeys: [],
      visible: false,
      keyword: '',
      tableData: [
        /* {
          id: '1t',
          skillCode: '1asd',
          skillName: 'asd阿萨德1',
          skillSprc: 'asdasf',
        },
        {
          id: '2t',
          skillCode: '2asd',
          skillName: 'asd阿萨德2',
          skillSprc: 'asdasf',
        }, */
      ],
      currentPage: 1,
      pagination: {
        total: 0,
        pageSize: 10, // 每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'], // 每页中显示的数据
        showTotal: total => `共 ${total} 条` // 分页中显示总的数据
      },
    }
  },
  watch:{
    visible(val){
      if( val ){
        if ( this.tableData.length === 0 ){
          this.$parent[this.apiMethods]({
            pageNo: 1,
            limit: 10,
          });
        }
      }
    },
    /* chooseList: {
      handler(val){
        const curArr = this.tableData.filter(item => val.includes(item.id));
        this.selectedRowKeys = curArr.map( el => el.id );
      },
      deep: true,
    }, */
    selectedRowKeys(val){
      debugger
      const arr = _.uniqBy([...this.$parent.optionsCopy, ...this.tableData],this.idField);
      this.chooseList = arr.filter(item => this.selectedRowKeys.includes(item[this.idField]));
    },
  },
  mounted () {
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows){
      this.selectedRowKeys = selectedRowKeys;
      /* // 变化的keys 差集
      let changeKeys = _.xor(selectedRowKeys, this.selectedRowKeys);
      // 只针对改变一项时，全选/取消 不用管
      const curcLength = this.selectedRowKeys.length;
      const cLength = selectedRowKeys.length; */

      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
    },
    search () {
      this.currentPage = 1
      this.$parent[this.apiMethods]({
        pageNo: this.currentPage,
        limit: this.pagination.pageSize,
        keyword: this.keyword,
      });
    },
    tableChange (pageOptions) {
      console.log(this.selectedRowKeys);
      this.currentPage = pageOptions.current;
      this.pagination.pageSize = pageOptions.pageSize;
      this.$parent[this.apiMethods]({
        pageNo: this.currentPage,
        limit: this.pagination.pageSize,
        keyword: this.keyword,
      });
    },
    removeChoose (idField) {
      this.selectedRowKeys = this.selectedRowKeys.filter( el => el !== idField);
    },
    confirmChoose () {
      this.visible = false
      this.$emit('confirm', this.chooseList)
    }
  }
}
</script>

<style scoped lang="less">
  .choose-items-con {
    border: solid 1px #DEDEDF;
    border-radius: 4px;
    box-sizing: border-box;
    color: #606266;
    transition: border-color .2s;
    display: flex;
    width: 100%;
    cursor: pointer;
    &:hover {
        border-color: #C0C4CC;
    }
    .tags{
        width:calc(100% - 25px);
        max-height: 160px;
        overflow-y: auto;
        padding-left: 15px;
    }
    .empty{
      opacity:0.6;
    }
    .icon{
        width:25px;
        cursor: pointer;
        transition: transform .3s;
        text-align: center;
        &.active{
            transform: rotate(180deg);
        }
    }
}
.dialog-footer{
  display:flex;
  align-items:center;
  .cText{
    word-break: keep-all;
    white-space: nowrap;
  }
}
.modal-footer-scroll {
    width: 100%;
    text-align: left;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    margin:0 16px;
    padding: 6px 0;
}
.select-down .a-select-dropdown__item{
  padding:0;
}
</style>

<style lang="less">
</style>
